import React from 'react'

import '@/assets/css/detail.css'

const Info = () => {

    // 接收跳转参数
    const [searchParams] = React.Router.useSearchParams()


    let [rid, SetRid] = React.useState(searchParams.get('rid') ? searchParams.get('rid') : 0)

    let [room, SetRoom] = React.useState({
        thumb_text: '',
        name: '',
        flag_text: [],
        service_text: [],
        price: 0,
        area: 0,
        live: 0,
    })

    let [order, SetOrder] = React.useState([])

    React.useEffect(() => {
        RoomInfo()
        OrderData()
    }, [])


    // 房间信息
    const RoomInfo = async () => {
        var result = await React.HTTP.post('/room/info', { id: rid })

        if (result.code == 0) {
            React.error(result.msg)
            return false
        } else {
            SetRoom(result.data)
        }
    }

    // 判断是否登录并跳转
    const Confirm = () => {
        if(!React.Business.id){
            React.error('请先登录',() => {})
            return false
        }

        React.navigate(`/room/confirm?rid=${rid}`)
    }

    // 获取订单信息
    const OrderData = async () => {
        var result = await React.HTTP.post('/room/order',{roomid: rid})

        if(result.code == 1){
            SetOrder(result.data)
        }
    }

    
    return (
        <>
            <React.UI.NavBar
                back='返回'
                onBack={() => { React.navigate(-1) }}
            >
                房间详情
            </React.UI.NavBar>

            <React.UI.Image src={room.thumb_text} />

            <div className="detail_top">
                <div id="intro" className="intro">
                    <div className="title">
                        {room.name}
                    </div>
                    <div className="betwee">
                        <div className="left">
                            {room.flag_text && room.flag_text.map((item: any, key) => <span key={key}>{item}</span>)}
                        </div>
                        <div className="right">
                            分享
                        </div>
                    </div>
                </div>

                <div id="comment" className="comment">
                    <div className="title">评价</div>
                    <React.UI.List >
                        {order.map((item: any, key) => (
                            item.status == 4 ? 
                                <React.UI.List.Item 
                                key={key}
                                prefix={<React.UI.Image src={item.business.avatar_text}
                                style={{ borderRadius: 20 }}
                                fit='cover'
                                width={40}
                                height={40} 
                                />}
                                description={item.comment}
                                >
                                {item.business.nickname}
                                </React.UI.List.Item> : <React.UI.List.Item key={key}>暂无评价</React.UI.List.Item>
                            
                        ))}
                        
                    </React.UI.List>
                </div>
                <div id="facility" className="facility">
                    <div className="title">设施服务</div>
                    <div className="plan">
                        {room.service_text && room.service_text.map((item: any, key) => <div className="item" key={key}>
                            <React.UI.Image src="./assets/images/answer.png" alt="" />
                            <span>{item}</span>
                        </div>)}

                    </div>
                </div>
                <div className="notesin">
                    <div className="title">预订须知</div>
                    <div className="item">
                        <span className="tips">预订房型：</span>
                        <span>{room.name}，面积为{room.area}平方米</span>
                    </div>
                    <div className="item">
                        <span className="tips">居住人数：</span>
                        <span>{room.live}人</span>
                    </div>
                    <div className="item">
                        <span className="tips">入离时间：</span>
                        <span>15:00 后入住，12:00 前退房</span>
                    </div>
                    <div className="item">
                        <span className="tips">预订时长：</span>
                        <span>随时可预订,最少预订1天, 最多预订天数不限</span>
                    </div>
                    
                </div>
            </div>

            <div className="foot-bar">
                <div className="price">
                    ￥{room.price}
                </div>
                
                <React.UI.Button color="primary" onClick={Confirm} >立即预定</React.UI.Button>
                
                
            </div>

        </>
    )
}

export default Info;
